<template>
  <div id="app">
    <img class="login-logo" src="../assets/loginLogo.png" alt="">
    <el-card class="box-card">
      <div class="card-tit">护苗专线管理系统</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px">
        <el-form-item prop="username">
          <template #label>
            <i class="logo-icon el-icon-s-custom"></i>
          </template>
          <el-input class="logo-input" onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}" v-model="ruleForm.username"></el-input>
        </el-form-item>
        <br/>
        <el-form-item prop="password">
          <template #label>
            <i class="logo-icon el-icon-s-opportunity"></i>
          </template>
          <el-input type="password" onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}" v-model="ruleForm.password"/>
        </el-form-item>
        <br/>
        <el-form-item prop="code">
          <template #label>
            <i class="logo-icon el-icon-info"></i>
          </template>
          <div style="display: flex">
            <el-input type="text" onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}" v-model="ruleForm.code"></el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode">
            </div>
          </div>
        </el-form-item>
        <br/>
      </el-form>
      <div style="width: 100%;text-align: center">
        <el-button type="success" id="loginBtn" @click="login()">登录</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
import * as u from '@/util/util'
import * as c from '@/util/config'

export default {
  name: "login",
  data() {
    return {
      //登录表单
      ruleForm: {
        username: '',
        password: '',
        code: '',
        randomStr: u.uuid(),
      },
      //登录校验
      rules: {
        username: [
          {required: true, message: '请输入帐号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
      },
      //验证码图片url
      codeUrl: "",


    }

  },
  created() {
    this.getCode();
  },
  methods: {
    //获取验证码
    getCode() {
      this.$HttpService.get("/sys-login/getCode", {
        randomStr: this.ruleForm.randomStr,
      }).then(res => {
        this.codeUrl = res;
        this.randomStr = u.uuid();
      })
    },
    //登录
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$HttpService.reqForm({
            url: "/login",
            method: "post",
            data: this.ruleForm,
          }).then(res => {
            //设置存储用户基本信息
            this.$util.setLoginInfo(res);
            //跳转路由
            setTimeout(() => {
              this.$router.push({path: "/"})
            }, 200)
          }).catch(() => {
            this.getCode();
          })
        }
      });

    }


  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input__inner{
  border: 0;
  border-bottom: 3px solid #5da540;
  border-radius: 0;
  background: none!important;
  font-size: 20px;
}
#loginBtn{
  width: 100%;
  border-radius: 50px;
  margin-top: 20px;
  padding: 16px 20px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
}
#app {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background: url('../assets/images/loginBg.png');
  background-position: bottom center;
  background-size: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  .login-logo{
    position: absolute;
    left: 100px;
    top: 100px;
  }
}

.box_top {
  text-align: center;
  padding: 30px;
}

.box-card {
  width: 500px;
  height: 510px;
  padding: 20px;
  margin-right: 10%;
  border-radius: 50px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 3px 3px 12px 2px #a6a6a6;
  .card-tit{
    text-align: center;
    text-indent: 2px;
    color: #5da540;
    font-size: 30px;
    padding-bottom: 40px;
    letter-spacing: 4px;
    font-weight: 600;
  }
  .logo-icon{
    font-size: 30px;
    color: #5da540;
    position: relative;
    top:15px
  }
  .three_login {
    border-top: 1px solid #dddddd;
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
    width: 100%;

    .group {
      margin: 0 auto;

      span {
        font-size: 12px;
      }

      .el-avatar {
        background: white;
      }
    }

    .group:hover {
      span {
        color: #a73e11;
        cursor: pointer;
      }
    }

  }
}

</style>
